<template>
	<!--pagesHome/vipCode/index.wxml-->
	<view class="container">
		<view class="container-header" :style="{ 'paddingTop': `${paddingTop}px` }" @click="$goPath(1)">
			<u-icon name="arrow-left" size="50rpx" color="#fff" />
			<text>会员码</text>
		</view>
		<view class="container-section">
			<view class="section-head">
				<view class="section-head-title">亲爱的*卡会员</view>
				<!-- <canvas class="bar-code" id="barcode" canvas-id="barcode" type="2d"></canvas> -->
				<tkiBarcode cid="code128" :loadMake="false" :opations="opations" :onval="true" format="code128"
					:val="identifyCode" ref="code128" />
				<view>{{ phone }}</view>
				<image class="qr-code" :src="qrCodeImg" mode="widthFix" />
				<!-- <canvas class="qr-code" id="myQrcode" type="2d" bindtap="handleGenerate"></canvas> -->
				<view class="line"></view>
				<!-- <view class="section-head-info">
        <view>
          <text>优惠券</text>
          <text>1</text>
        </view>
        <view>
          <text>积分</text>
          <text>1</text>
        </view>
        <view>
          <text>钱包</text>
          <text>1</text>
        </view>
        <view>
          <text>礼品卡</text>
          <text>1</text>
        </view>
        <view>
          <text>购物金</text>
          <text>1</text>
        </view>
      </view> -->
				<!--  bind:tap="goWxPay" -->
				<view class="wx-pay">
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/vector.png" mode="widthFix" />
					<text>使用微信支付</text>
				</view>
			</view>
			<!-- <view class="look-check" >
      <text bindtap="onIsShow">查看使用说明</text>
      <t-icon name="{{ isShow? 'caret-up-small' : 'caret-down-small' }}" size="50rpx" color="#fff" bindtap="onIsShow" />
    </view>
    <view wx:if="{{isShow}}" class="info"> 钱包使用说明 </view>
    <view wx:if="{{isShow}}" class="info-text"> 
      1、线上线下会员同步。 
    </view> -->
		</view>
	</view>
</template>
<script>
	import QR from '@/utils/qrcode.js';
	import {
		getUserInfo
	} from '@/common/auth';
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	export default {
		components: {
			tkiBarcode
		},
		data() {
			return {
				paddingTop: 0,
				isShow: true,
				identifyCode: '',
				qrCodeImg: '',
				phone: '',
				val: "FB19A1650-100S",
				opations: {
					// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
					width: 3, //设置条之间的宽度
					height: 120, //高度
					displayValue: false, //是否在条形码下方显示文字
					// text: "FB19A1650-100S",//覆盖显示的文本
					textAlign: "left", //设置文本的水平对齐方式
					textPosition: "bottom", //设置文本的垂直位置
					textMargin: 0, //设置条形码和文本之间的间距
					// fontSize: 24,//设置文本的大小
					// fontColor: "#0000ef",//设置文本的颜色
					// lineColor: "#0000ef",//设置条形码的颜色
					background: "#FFFFFF", //设置条形码的背景色
					margin: 0, //设置条形码周围的空白边距
					// marginTop: 10,//设置条形码周围的上边距
					// marginBottom: 20,//设置条形码周围的下边距
					// marginLeft: 30,//设置条形码周围的左边距
					// marginRight: 40,//设置条形码周围的右边距
				}
			}
		},
		onShow() {
			const that = this
			//获取手机型号
			uni.getSystemInfo({
				success: function(res) {
					that.paddingTop = res.statusBarHeight //状态栏高度
				}
			});
			that.handleQrCode()
		},
		mounted() {
			// this.createBarcode()
		},
		onLoad() {
			let phone = getUserInfo().ypdUser.phone;
			phone = (phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
			let storeDTO = uni.getStorageSync('storeDTO');
			this.identifyCode = storeDTO.identifyCode
			this.phone = phone
			setTimeout(() => {
				this.$refs.code128._makeCode()
			}, 1000);
		},
		methods: {
			handleQrCode() {
				const {
					identifyCode
				} = this;
				this.qrCodeImg = QR.createQrCodeImg(identifyCode);
			},
			createBarcode() {
				const {
					identifyCode
				} = this;
				const query = uni.createSelectorQuery().in(this)
				console.log(query)
				query.select('#barcode')
					.fields({
						node: true,
						size: true
					}).exec((res) => {
						console.log(res, 'res')
						const canvas = res[0].node
						if (!canvas) return
						/* 获取 canvas 实例 */
						const context = canvas.getContext('2d')
						const dpr = uni.getSystemInfoSync().pixelRatio
						canvas.width = res[0].width * dpr
						canvas.height = res[0].height * dpr
						context.scale(dpr, dpr)
						let arr = BarCode.barcode(context, identifyCode, 360, 110)
						console.log(arr, 'arr')
					})
			},
		},
	}
</script>
<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background-color: #32B499;
		font-family: 'PingFang SC-Medium', ' PingFang SC';
		color: #333;
	}

	.container-header {
		padding-left: 12rpx;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}

	.container-section {
		padding: 24rpx;
	}

	.section-head {
		width: 100%;
		height: 978rpx;
		background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/78d8c63e-24d2-4f7b-811a-b09f61a7d78c.png);
		background-size: 100% 100%;
		padding: 48rpx;
		font-family: 'PingFang SC-Medium', ' PingFang SC';
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section-head-title {
		margin-bottom: 48rpx;
		color: #000000;
		font-size: 28rpx;
	}

	.bar-code {
		width: 360rpx;
		height: 110rpx;
		/* background: #000; */
	}

	.qr-code {
		width: 360rpx;
		height: 360rpx;
		margin-top: 24rpx;
		display: block;
	}

	.line {
		width: 100%;
		border: 1rpx dashed #999999;
		margin-top: 26rpx;
		margin-bottom: 32rpx;
	}

	.section-head-info {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.section-head-info>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.section-head-info>view>text:first-child {
		font-size: 23rpx;
		color: #999999;
		font-weight: 400;
	}

	.wx-pay {
		width: 600rpx;
		height: 92rpx;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		border: 2rpx solid #09BB07;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #09BB07;
		font-family: 'PingFang SC-Bold', 'PingFang SC';
	}

	.wx-pay image {
		width: 44rpx;
		height: 40rpx;
		display: block;
		margin-right: 10rpx;
	}

	.look-check {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 24rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.info {
		font-family: 'PingFang SC-Bold', 'PingFang SC';
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 24rpx;
	}

	.info-text {
		color: #FFFFFF;
		font-size: 24rpx;
	}
</style>